スクリーン ウェイクロック API: Webアプリケーションで画面スリープを防ぐ

スクリーン ウェイクロック APIは、Webアプリケーションがデバイスの画面の暗転やロックを防ぐことができるWeb APIです。これは、メディアプレーヤー、ナビゲーションアプリ、または長時間のユーザー操作を必要とするアプリケーションなど、継続的な画面表示が不可欠なアプリケーションで特に役立ちます。

スクリーン ウェイクロックが重要な理由

今日のデジタル社会では、ユーザーはシームレスな体験を期待しています。画面が自動的に暗くなったりロックされたりするデバイスは、特にユーザーがWebアプリケーションに積極的に関わっている場合、これらの体験を中断させることがあります。これらのシナリオを考えてみましょう。

• ビデオ再生: 映画を見たり、料理のチュートリアルを見たりしているときに、画面が常に暗くなり、画面を維持するためにタップしなければならない状況を想像してみてください。これは非常にイライラする体験です。
• ナビゲーションアプリ: 車を運転中にナビゲーションアプリを使用している場合、継続的な指示を提供するために画面をオンのままにしておく必要があります。画面が暗くなったりロックされたりすると、見逃した曲がり角や潜在的な安全上の危険につながる可能性があります。
• プレゼンテーションアプリ: スライドを提示したり、重要な情報を表示したりするには、プレゼンテーション全体で画面をアクティブに保つ必要があります。
• ゲームアプリケーション: 多くのゲームでは、ゲームプレイのために中断されない画面表示が必要です。画面スリープはゲーム体験を妨げます。
• オンラインホワイトボード: オンラインホワイトボードでの共同作業には、ユーザーが再エンゲージするために繰り返しタップする必要がないように、画面をスリープさせないことが必要です。

スクリーン ウェイクロック APIはこれらの問題に対するソリューションを提供し、Webアプリケーションが画面のオン/オフ状態を制御し、よりシームレスでユーザーフレンドリーな体験を提供できるようにします。

ブラウザサポート

2024年後半現在、スクリーン ウェイクロック APIは主要なブラウザでしっかりとサポートされています。しかし、最適なクロスブラウザ互換性を確保するために、Mozilla Developer Network (MDN) や Can I use のようなリソースで最新のブラウザ互換性情報を確認することが常に重要です。ブラウザのサポートは、ブラウザのバージョンやオペレーティングシステムによって異なる場合があります。

スクリーン ウェイクロック APIの使用方法

スクリーン ウェイクロック APIは比較的簡単に使用できます。以下に、関連する主要なステップを説明します。

1. APIサポートの確認

APIを使用しようとする前に、ユーザーのブラウザがそれをサポートしているか確認することが不可欠です。これにより、APIを実装していないブラウザでのエラーを防ぐことができます。

            if ('wakeLock' in navigator) {
  // Screen Wake Lock API supported
} else {
  // Screen Wake Lock API not supported
  console.log('Screen Wake Lock API is not supported by this browser.');
}

            

              
                Copy
              
            
          

2. ウェイクロックの要求

ウェイクロックを要求するには、navigator.wakeLock.request()メソッドを使用します。このメソッドは、要求が成功した場合にWakeLockSentinelオブジェクトで解決されるPromiseを返します。WakeLockSentinelオブジェクトは、アクティブなウェイクロックを表します。

            let wakeLock = null;

const requestWakeLock = async () => {
  try {
    wakeLock = await navigator.wakeLock.request('screen');
    console.log('Screen wake lock active!');

    wakeLock.addEventListener('release', () => {
      console.log('Screen Wake Lock was released');
    });
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

// Call this function to activate the wake lock
requestWakeLock();

            

              
                Copy
              
            
          

この例では、requestWakeLock()関数がスクリーンウェイクロックの取得を試みます。'screen'引数は、画面の暗転またはロックを防ぎたいことを指定します。要求が成功すると、コンソールにメッセージが記録されます。このコードには、ウェイクロック要求中に発生する可能性のある例外をキャッチするためのエラーハンドラーも含まれています。重要なのは、Wake Lockがアクティブでなくなったときを示す「release」イベントをリッスンするためにイベントリスナーを追加していることです。これは、ユーザーが明示的にロックを解放したか、システムが省電力措置のためにそれを回復した場合に発生する可能性があります。

3. ウェイクロックの解放

ウェイクロックが不要になったら、それを解放することが重要です。そうしないと、デバイスのバッテリーを消耗し、ユーザー体験に悪影響を与える可能性があります。ウェイクロックを解放するには、WakeLockSentinelオブジェクトのrelease()メソッドを呼び出します。

            const releaseWakeLock = async () => {
  if (wakeLock) {
    await wakeLock.release();
    wakeLock = null;
    console.log('Screen wake lock released!');
  }
};

// Call this function to release the wake lock
releaseWakeLock();

            

              
                Copy
              
            
          

この関数は、ウェイクロックを安全に解放し、wakeLock変数をnullに設定します。ロックの解放時にエラーを回避するために、wakeLock変数が適切に管理されていることを確認することが重要です。

4. ウェイクロック解放イベントの処理

システムは、ユーザーの非アクティブやバッテリー残量低下などのさまざまな理由でウェイクロックを解放する可能性があります。WakeLockSentinelオブジェクトのreleaseイベントをリッスンして、これらの状況を適切に処理することが重要です。これにより、ウェイクロックを再要求したり、その他の適切なアクションを実行したりできます。

            wakeLock.addEventListener('release', () => {
  console.log('Screen Wake Lock was released');
  // Attempt to re-request the wake lock
  // or take other appropriate actions
  requestWakeLock(); // For example re-requesting the wakelock
});

            

              
                Copy
              
            
          

この例では、releaseイベントをリッスンし、ウェイクロックを再要求する可能性のある方法を示しています。実際の実装は、アプリケーションの特定の要件によって異なります。

ベストプラクティスと考慮事項

スクリーン ウェイクロック APIは強力なツールですが、責任を持って使用し、以下のベストプラクティスを考慮することが重要です。

• 必要な場合のみウェイクロックを要求する: バッテリーを消耗する可能性があるため、不要なウェイクロックの取得は避けてください。ユーザー体験にとって継続的な画面表示が本当に不可欠な場合にのみ、ウェイクロックを要求してください。
• ウェイクロックは速やかに解放する: 不要になったらすぐにウェイクロックを解放してください。これにより、バッテリー電力を節約し、不要な消耗を防ぐことができます。
• 解放イベントを適切に処理する: システムが予期せずウェイクロックを解放する可能性があることに備えてください。releaseイベントをリッスンし、ウェイクロックの再要求やその他の適切なアクションなどの適切なアクションを実行してください。
• ユーザーコントロールを提供する: ユーザーにウェイクロック機能を有効または無効にするコントロールを提供する検討をしてください。これにより、ユーザーはデバイスの電力消費をより細かく制御でき、アプリケーションの動作をカスタマイズできます。たとえば、メディアプレーヤーには「画面をオンのままにする」トグルがあります。
• バッテリー寿命を考慮する: バッテリー寿命への影響に注意してください。画面を常にオンにしておくと、特にモバイルデバイスではバッテリー寿命が大幅に短くなる可能性があります。潜在的な影響についてユーザーに通知し、軽減するためのオプションを提供してください。
• ユーザーの許可: API自体は直接ユーザーの許可を求めませんが、アプリケーションが画面のスリープを防いでいることをユーザーに通知し、この動作を無効にできるようにすることは良い習慣です。
• フォールバックメカニズム: APIをサポートしていないブラウザの場合は、フォールバックメカニズムを実装することを検討してください。これには、画面の暗転やロックを防ぐために、ページに小さな無音のビデオ要素を挿入することが含まれる場合があります。ただし、このアプローチは、スクリーン ウェイクロック APIを使用するよりも信頼性が低く、リソースをより多く消費する可能性があることに注意してください。
• テスト: さまざまなデバイスやブラウザでアプリケーションを徹底的にテストして、スクリーン ウェイクロック APIが期待どおりに機能することを確認してください。バッテリー消費とユーザー体験に注意してください。
• アクセシビリティ: 常に画面をオンにしておくことは、一部のユーザーにとって問題となる可能性があることに注意してください。画面ウェイクロックを無効にする方法を提供することで、アプリケーションのアクセシビリティが向上します。

実際の例

以下に、さまざまなアプリケーションでスクリーン ウェイクロック APIがどのように使用できるかの実際の例をいくつか示します。

• メディアプレーヤー: ビデオストリーミングアプリは、スクリーン ウェイクロック APIを使用して再生中に画面が暗くなるのを防ぎ、シームレスな視聴体験を提供できます。
• ナビゲーションアプリ: ナビゲーションアプリは、ユーザーが運転中に画面をオンのままにするために API を使用して、指示が常に表示されるようにすることができます。
• プレゼンテーションアプリ: プレゼンテーションアプリは、プレゼンテーション中に画面が暗くなるのを防ぐために API を使用して、視聴者が常にスライドを見ることができるようにすることができます。
• フィットネスアプリ: ワークアウトセッションを追跡するフィットネスアプリは、画面をオンのままにして、ユーザーがデバイスのロックを解除せずにメトリックをすばやく表示できるようにします。
• レシピアプリ: レシピアプリは、ユーザーがレシピに従っている間、画面をオンのままにするために API を使用して、料理中に画面が暗くなるのを防ぐことができます。
• キオスクアプリケーション: キオスクアプリケーションはこの機能から恩恵を受けます。たとえば、空港やレストランのセルフサービスキオスクは、スクリーン ウェイクロック API を使用して、画面がアクティブでユーザー操作に応答することを保証できます。
• 遠隔医療アプリケーション: 特に観察が必要な仮想医師の診察中、スクリーン ウェイクロック API を使用して、相談全体で画面がオンのままであることを保証できます。

コード例: スクリーン ウェイクロック付きメディアプレーヤー

この例では、シンプルなメディアプレーヤーアプリケーションにスクリーン ウェイクロック APIを実装する方法を示します。

            
<!DOCTYPE html>
<html>
<head>
  <title>Media Player with Screen Wake Lock</title>
</head>
<body>
  <video id="myVideo" width="640" height="360" controls>
    <source src="your-video.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>

  <button id="wakeLockBtn">Enable Screen Wake Lock</button>

  <script>
    const video = document.getElementById('myVideo');
    const wakeLockBtn = document.getElementById('wakeLockBtn');
    let wakeLock = null;

    const requestWakeLock = async () => {
      try {
        wakeLock = await navigator.wakeLock.request('screen');
        console.log('Screen wake lock active!');
        wakeLockBtn.textContent = 'Disable Screen Wake Lock';

        wakeLock.addEventListener('release', () => {
          console.log('Screen Wake Lock was released');
          wakeLockBtn.textContent = 'Enable Screen Wake Lock';
        });

      } catch (err) {
        console.error(`${err.name}, ${err.message}`);
      }
    };

    const releaseWakeLock = async () => {
      if (wakeLock) {
        await wakeLock.release();
        wakeLock = null;
        console.log('Screen wake lock released!');
        wakeLockBtn.textContent = 'Enable Screen Wake Lock';
      }
    };

    wakeLockBtn.addEventListener('click', () => {
      if (wakeLock) {
        releaseWakeLock();
      } else {
        requestWakeLock();
      }
    });

    // Optional: Automatically request wake lock when video starts playing
    video.addEventListener('play', () => {
        if(!wakeLock){
            requestWakeLock();
        }
    });

  </script>
</body>
</html>

            

              
                Copy
              
            
          

このコードは、画面ウェイクロックを有効または無効にするボタンを備えたシンプルなメディアプレーヤーを作成します。ボタンがクリックされると、コードは新しいウェイクロックを要求するか、既存のものを解放します。ボタンのテキストは、ウェイクロックの現在の状態を反映するように更新されます。この例には、ビデオの再生が開始されたときにウェイクロックを自動的に要求するオプションのイベントリスナーも含まれています。注意: your-video.mp4 をビデオファイルへの実際のパスに置き換えてください。

セキュリティ上の考慮事項

スクリーン ウェイクロック APIは、セキュリティを念頭に置いて設計されています。ブラウザは、APIの悪用を防ぐためにさまざまなセキュリティ対策を実装しています。たとえば、ブラウザはウェイクロックを保持できる期間を制限したり、ウェイクロックを付与する前にユーザーの操作を要求したりする場合があります。APIを責任を持って倫理的に使用するために、本文で概説されているベストプラクティスに常に従ってください。

スクリーン ウェイクロック APIの代替

スクリーン ウェイクロック APIが登場する前は、開発者は画面スリープを防ぐために「ハック」を使用することがよくありました。これらの方法は一般的に信頼性が低く、推奨されません。

• No-Op Video Element: ページに小さく無音のビデオ要素を挿入し、それを継続的に再生します。これにより、システムはメディアが再生されていると誤解し、スリープを防ぎます。これは非常にリソースを消費します。
• ダミーAJAXリクエスト: サーバーに定期的にAJAXリクエストを送信して、デバイスを「アクティブ」に保ちます。これは、ネットワーク集約的で信頼性がないため、劣った代替手段です。

これらの方法は、信頼性が低く、パフォーマンスとバッテリー寿命に悪影響を与える可能性があるため、推奨されません。スクリーン ウェイクロック APIは、Webアプリケーションで画面スリープを防ぐための推奨されるソリューションです。

結論

スクリーン ウェイクロック APIは、シームレスで魅力的なユーザー体験を作成したいWeb開発者にとって貴重なツールです。デバイスの画面が暗くなったりロックされたりするのを防ぐことで、長時間の非アクティブ期間中でも、アプリケーションが表示され応答し続けることを保証できます。APIを責任を持って使用し、このガイドで概説されているベストプラクティスに従って、デバイスのバッテリーを消耗させ、ユーザー体験に悪影響を与えることを避けてください。APIの採用が広がるにつれて、それは間違いなくWeb開発ツールの不可欠な部分になるでしょう。スクリーン ウェイクロック APIの力を活用して、Webアプリケーションをレベルアップし、世界中のユーザーにさらに楽しい体験を提供してください。